<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>佐心，教家长做父母</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
	<script>
		//var wxUser='${wxUser}';
		//if(""==wxUser || null==wxUser){
		//	location.href="../../index.html";
		//}
	</script>
	<c:set var="ctx" value="${pageContext.request.contextPath}" />
    <link rel="stylesheet" href="${ctx}/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="${ctx}/assets/css/style.css?v=2.3">
    <link rel="stylesheet" href="${ctx}/assets/css/index.css?v=2.3">
    <script>
    onload=function(){
    
    	var modelHtml="<div class='am-modal am-modal-confirm' tabindex='-1' id='my-confirm'>";
			    modelHtml+="<div class='am-modal-dialog'>";
			    modelHtml+="    <div class='am-modal-hd'>佐心科技</div>";
			    modelHtml+="    <div class='am-modal-bd' id='alertMsg'>";
			           modelHtml+="";
			    modelHtml+="    </div>";
			    modelHtml+="    <div class='am-modal-footer'>";
			    modelHtml+="        <span class='am-modal-btn' data-am-modal-confirm>确定</span>";
			    modelHtml+="    </div>";
			    modelHtml+="</div>";
			modelHtml+="</div>";
			$("body").append(modelHtml);
    
    };
    function zhaoAlert(msg){
    	$("#alertMsg").text(msg);
    	$('#my-confirm').modal({
            relatedTarget: this,
            onConfirm: function(options) {
            },
            // closeOnConfirm: false,
            onCancel: function() {

            }
        });
    }
    	    /** 
     * 返回前一页（或关闭本页面） 
     * <li>如果没有前一页历史，则直接关闭当前页面</li> 
     */  
    function goBack(){  
        if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)){ // IE  
            if(history.length > 0){  
                window.history.go( -1 );  
            }else{  
                location.href="${ctx}/index.jsp";
            }  
        }else{ //非IE浏览器  
            if (navigator.userAgent.indexOf('Firefox') >= 0 ||  
                navigator.userAgent.indexOf('Opera') >= 0 ||  
                navigator.userAgent.indexOf('Safari') >= 0 ||  
                navigator.userAgent.indexOf('Chrome') >= 0 ||  
                navigator.userAgent.indexOf('WebKit') >= 0){  
      
                if(window.history.length > 1){  
                    window.history.go( -1 );  
                }else{  
                    location.href="${ctx}/index.jsp";
                }  
            }else{ //未知的浏览器  
                window.history.go( -1 );  
            }  
        }  
    }  
    </script>
</head>
<body >
<header data-am-widget="header" class="am-header am-header-default am-border-bottom">
    <div class="am-header-left am-header-nav">
        <a  onclick="goBack();"  >
            <i class="icon_8"></i>
        </a>
    </div>
    <h1 class="am-header-title" >
        绑定账号
    </h1>

</header>
<section class="" id="amz-main" data-tag="css-nav">

    <div class="div-logo"></div>

    <ul class="am-list am-list-static am-list-border margin-top-20 register">
        <li class="am-padding-left-xl">
            <i class="icon_1"></i>
            <input type="tel" class="" id="telphone"  placeholder="输入您的手机号"></li>
        <li  class="am-padding-left-xl ">
            <i class="icon_2"></i>
            <input type="tel"  class="" id="code" placeholder="输入4位手机验证码">
            <i class="validate_btn" onclick="createCode()">获取验证码</i>
        </li>
    </ul>

    <div class="am-g am-g-fixed  font-14 bd-phone margin-top-20 ">
        <div class="am-u-sm-12  am-text-center">
            <button type="button" class="am-btn am-btn-warning am-btn-block" onclick="loginBind()">立即绑定</button>
        </div>
    </div>

</section>

<script src="${ctx}/assets/js/jquery.min.js"></script>
<script src="${ctx}/assets/js/amazeui.min.js"></script>
<script>
var wait=60;  
function createCode(){
	 var telphone=$("#telphone").val();
	 var reg = /^0?1[3|4|5|6|7|8][0-9]\d{8}$/;
	 if (!reg.test(telphone)) {
	      zhaoAlert("请输入正确的手机号码");
	      return false;
	 }
	
	if(wait==60){
		var baseResponse=$.ajax({url:"${ctx}/sendAuthCode?telphone="+telphone,async:false});
	  	var sendAuthCode=JSON.parse(baseResponse.responseText);
	   	if(sendAuthCode.resultCode=="0"){
	   		
	   	}else{
	   		zhaoAlert(sendAuthCode.resultDesc);
	   	}
	}
	
	if(wait == 0) {  
        $(".validate_btn").removeClass("disabled");
        $(".validate_btn").text("获取验证码");  
        wait = 60;  
    }else {  
        $(".validate_btn").addClass("disabled");
        $(".validate_btn").text("重新发送(" + wait + ")");  
        wait--;  
        setTimeout(function() {  
            createCode(); 
        },  
        1000);  
    } 
}
function loginBind(){
	var telphone=$("#telphone").val();
	var code=$("#code").val();
	var baseResponse=$.ajax({url:"${ctx}/isAuthCode?telphone="+telphone+"&code="+code,async:false});
  	var isAuthCode=JSON.parse(baseResponse.responseText);
   	if(isAuthCode.resultCode=="0"){
   		location.href="${ctx}/loginBind?telphone="+telphone+"&code="+code;
   	}else{
   		zhaoAlert(isAuthCode.resultDesc);
   	}
}
</script>
</body>
</html>